एचटीएमएल वीडियो
HTML <वीडियो> तत्व का उपयोग किसी वेब पेज पर वीडियो प्रदर्शित करने के लिए किया जाता है।
वीडियो उदाहरण
धन्यवाद बिग बक बन्नी
<वीडियो> तत्व
HTML में वीडियो प्रदर्शित करने के लिए, <video> तत्व का उपयोग करें:
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
आपका ब्राउज़र में वीडियो टैग समर्थित नहीं है।
</video>
यह काम किस प्रकार करता है
महत्वपूर्ण विशेषताएं:
controls
प्ले, बास और वॉल्यूम जैसे वीडियो नियंत्रण जोड़ता है
width & height
वीडियो की चौड़ाई और ऊंचाई सेट करता है. यदि सेट नहीं किया गया है, तो वीडियो लोड होने पर पेज ब्लिंक हो सकता है
<source>
आपको कनवर्ट करने के लिए वीडियो फ़ाइलों को निर्दिष्ट करने की अनुमति देता है। ब्राउज़र पहले ज्ञात प्रारूप का उपयोग करेगा
महत्वपूर्ण नोट:
<वीडियो> और </वीडियो> टैग के बीच का टेक्स्ट केवल उन ब्राउज़र में प्रदर्शित किया जाएगा जो <वीडियो> तत्व का समर्थन नहीं करते हैं।
HTML <video> Autoplay
किसी वीडियो को ऑटोप्ले करने के लिए, ऑटोप्ले विशेषता का उपयोग करें:
उदाहरण
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
आपका ब्राउज़र में वीडियो टैग समर्थित नहीं है।
</video>
नोट:
क्रोमियम ब्राउज़र अधिकांश मामलों में ऑटोप्ले की अनुमति नहीं देते हैं। हालाँकि, निश्चित रूप से ऑटोप्ले की हमेशा अनुमति होती है।
अपने वीडियो को स्वचालित रूप से चलाने के लिए ऑटोप्ले के बाद म्यूट (लेकिन म्यूट) जोड़ें:
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
आपका ब्राउज़र में वीडियो टैग समर्थित नहीं है।
</video>
ब्राउज़र समर्थन
तालिका में संख्याएँ पहले ब्राउज़र संस्करण का प्रतिनिधित्व करती हैं जो <वीडियो> तत्व का पूरी तरह से समर्थन करता है।
| अंग | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML वीडियो प्रारूप
तीन समर्थित वीडियो प्रारूप हैं: MP4, WebM और Ogg। विभिन्न प्रारूपों के लिए ब्राउज़र समर्थन:
| ब्राउज़र | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML वीडियो - मीडिया प्रकार
| फ़ाइल फ़ारमैट | मीडिया प्रकार |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
प्रकार विशेषता:
<स्रोत> तत्व में प्रकार विशेषता महत्वपूर्ण है। यह ब्राउज़र को वीडियो प्रारूप बताता है ताकि ब्राउज़र तुरंत निर्णय ले सके कि वह इसे चला सकता है या नहीं।
HTML वीडियो - विधियाँ, गुण और घटनाएँ
HTML DOM <video> तत्व के लिए विधियों, गुणों और घटनाओं को परिभाषित करता है।
यह आपको वीडियो लोड करने, चलाने, रोकने और उनकी अवधि और वॉल्यूम निर्धारित करने की अनुमति देता है।
ऐसे DOM ईवेंट भी हैं जो किसी वीडियो के चलने, रुकने आदि पर आपको सूचित कर सकते हैं।
उदाहरण: जावास्क्रिप्ट का उपयोग करना
Video courtesy of Big Buck Bunny.
var video = document.getElementById("jsVideo");
// प्ले बटन
document.getElementById("playBtn").onclick = function() {
video.play();
};
// स्टॉप बटन
document.getElementById("pauseBtn").onclick = function() {
video.pause();
};
DOM नोट:
संपूर्ण DOM संदर्भ के लिए, हमारे HTML ऑडियो/वीडियो DOM संदर्भ पर जाएँ।
HTML वीडियो टैग
| टैग | व्याख्या |
|---|---|
| <video> | एक वीडियो या मूवी को परिभाषित करता है |
| <source> | <वीडियो> और <ऑडियो> जैसे मीडिया तत्वों के लिए एकाधिक मीडिया संसाधनों को परिभाषित करता है |
| <track> | मीडिया प्लेयर्स में टेक्स्ट ट्रैक्स को परिभाषित करता है |
महत्वपूर्ण बिंदु:
- वीडियो को हमेशा एक से अधिक प्रारूप में प्रस्तुत करें (MP4, WebM, Ogg)
- हमेशा चौड़ाई और ऊंचाई विशेषताएँ जोड़ें
- ब्राउज़र अनुकूलता के लिए नियंत्रण विशेषता जोड़ें
- ऑटोप्ले का उपयोग करते समय हमेशा म्यूट जोड़ें
- <स्रोत> तत्व में प्रकार विशेषता निर्दिष्ट करें